import {
    Form,
    Input,
    Select,
    DatePicker,
    InputNumber,
    Col,
    TreeSelect
} from 'antd';

const {TextArea} = Input;

const {RangePicker} = DatePicker;
import {Cascader} from 'tdesign-react';
import 'tdesign-react/es/style/index.css';
import AddressPart from "@/components/AddressPart/AddressPart.tsx"
import TrimmedInput from "@/components/TrimmedInput.tsx";

// 搜索表单组件
const CycleForm = ({fields = [], span = 8, disabled = false}, form) => {
    const displayRender = (labels: string[]) => labels[labels.length - 1];

    // 根据字段类型渲染对应的表单组件
    const renderFormItem = (field) => {
        const {type, options, placeholder, name, ...restProps} = field;
        switch (type) {
            case 'input':
                return <TrimmedInput placeholder={placeholder || '请输入'} {...restProps} />;
            case 'select':
                return (
                    <Select
                        placeholder={placeholder || '请选择'}
                        options={options}
                        allowClear
                        fieldNames={{
                            label: 'dicItemName',
                            value: 'dicItemCode'
                        }}
                        {...restProps}
                        showSearch
                    />
                );

            case 'date':
                return <DatePicker
                    format="YYYY-MM-DD"
                    placeholder={placeholder || '选择日期'}
                    style={{width: '100%'}}
                    {...restProps}
                />;

            case 'rangePicker':
                return <RangePicker style={{width: '100%'}} {...restProps} />;

            case 'number':
                return <InputNumber placeholder={placeholder || '请输入数字'} {...restProps} />;

            case 'cascader':
                return <Cascader options={options} checkStrictly keys={restProps.fieldNames} {...restProps} label=""
                                 showAllLevels={false} disabled={disabled} filterable />;
            case 'TreeSelect':
                return <TreeSelect showSearch allowClear treeDefaultExpandAll treeData={options} {...restProps}
                />;
            case 'TextArea':
                return <TextArea placeholder={placeholder || '请输入'} rows={4} />;
            case 'custom':
                return field.render();
            case 'AddressPart':
                return <AddressPart showArea={'showArea' in field ? field.showArea : true} />;
            default:
                return <Input placeholder={placeholder || '请输入'} />;
        }
    };

    return (
        <>
            {fields.map((field) => (
                <Col key={field.name} span={field?.span || span} pull={field?.pull || 0}>
                    <Form.Item
                        name={field.name}
                        label={field.label}
                        rules={field.rules}
                        validateTrigger={field.validateTrigger || 'onBlur'}
                        className={field.formClassName}
                        labelCol={field.labelCol}
                        dependencies={field.dependencies || undefined}
                    >
                        {renderFormItem(field)}
                    </Form.Item>
                </Col>

            ))}</>
    );
};

export default CycleForm;